<template>
    <div class="login-container">
        <div class="login-box">
            <div class="avatar-box">
                <!-- 使用 import 来加载图片 -->
                <img class="avatar" :src="avatarSrc" alt="Avatar" />
            </div>
            <div class="form-login">
                <div class="form-group">
                    <label for="username">登录名称：</label>
                    <input
                        type="text"
                        class="form-control"
                        id="username"
                        placeholder="请输入登录名称"
                        autocomplete="off"
                        v-model.trim="username"
                    />
                </div>
                <div class="form-group">
                    <label for="password">登陆密码：</label>
                    <input
                        type="password"
                        class="form-control"
                        id="password"
                        placeholder="请输入登录密码"
                        v-model.trim="password"
                    />
                </div>
                <div class="form-group">
                    <button type="button" class="btn" @click="onLogin">登录</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 导入 useRouter
import avatarSrc from '../assets/lena-gray.jpg'; // 使用 import 导入图片

const router = useRouter(); // 获取 router 实例
const username = ref(''); // 用户名
const password = ref(''); // 密码

const onLogin = () => {
    if (username.value === 'admin' && password.value === '123456') {
        localStorage.setItem('token', 'Bearer xxx'); // 设置 token
        router.push('/home'); // 登录成功后跳转
    } else {
        alert('用户名或者密码错误'); // 弹出提示
        localStorage.removeItem('token'); // 清除 token
    }
}
</script>

<style>
/* 添加你的样式 */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-box {
    width: 300px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.avatar-box {
    text-align: center;
    margin-bottom: 20px;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.form-group {
    margin-bottom: 15px;
}
</style>
